<template>
	<view class="page-container u-flex u-flex-wrap u-row-center" id="login-page">
		<u-tabs class="tabs-wrapper" name="name" count="count" :list="tabs" :is-scroll="false" :current="currentTab" @change="changeTab"></u-tabs>
		
		<u-form :model="loginForm" ref="loginForm" class="login-form" v-if="currentTab==0">
			<u-form-item label="账号"><u-input v-model="loginForm.userName" placeholder="请输入账号" /></u-form-item>
			<u-form-item label="密码"><u-input v-model="loginForm.passWord" type="password" password-icon placeholder="请输入密码" /></u-form-item>
			<u-form-item><u-button size="medium" shape="circle" ripple @click="login">登录</u-button></u-form-item>
		</u-form>
		<u-form :model="registerForm" ref="registerForm" class="login-form" v-if="currentTab==1">
			<u-form-item label="账号"><u-input v-model="registerForm.userName" placeholder="请输入账号" /></u-form-item>
			<u-form-item label="密码"><u-input v-model="registerForm.passWord" type="password" password-icon placeholder="请输入密码" /></u-form-item>
			<u-form-item><u-button size="medium" shape="circle" ripple @click="register">注册</u-button></u-form-item>
		</u-form>
		
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
import nimMixin from '@/mixins/nimMixin.js'
export default {
	mixins:[nimMixin],
	data(){
		return {
			tabs:[
				{
					name: '登录'
				},{
					name: '注册'
				},
			],
			currentTab:0,
			loginForm:{
				userName:'',
				passWord:''
			},
			registerForm:{
				userName:'',
				passWord:''
			}
		}
	},
	methods:{
		changeTab(idx){
			this.currentTab=idx
		},
		
		login(){
			uni.showLoading({
				title:"登陆中"
			})
			uniCloud.callFunction({
				name:'login',
				data:{
					username:this.loginForm.userName,
					password:this.loginForm.passWord,
				},
				success:(res) =>{
					if(res.result.code === 0) {
						uni.hideLoading()
						uni.setStorageSync('token',res.result.token)
						uni.setStorageSync('token_expired', res.result.tokenExpired)
						uni.setStorageSync('user_info', res.result.userInfo)
						uni.showToast({
							title: '登录成功',
							icon: 'none'
						})
					} else {
						uni.hideLoading()
						uni.showModal({
							content: res.result.message,
							showCancel: false
						})
					}
				}
			})
			//this.initNimSdk(this.loginForm.userName,this.loginForm.passWord);
		},
		
		register(){
			uniCloud.callFunction({
				name:'register',
				data:{
					username:this.registerForm.userName,
					password:this.registerForm.passWord,
				},
				success:(res) =>{
					if(res.result.code === 0) {
						// 2.8.0版本起调整为蛇形uni_id_token（调整后在一段时间内兼容驼峰uniIdToken）
						//uni.setStorageSync('uni_id_token',res.result.token)
						//uni.setStorageSync('uni_id_token_expired', res.result.tokenExpired)
						// 其他业务代码，如跳转到首页等
						uni.showToast({
							title: '注册成功',
							icon: 'none'
						})
						this.currentTab=0
					} else {
						uni.showModal({
							content: res.result.message,
							showCancel: false
						})
					}
				}
			})
		},
		
		nimConnect(info){
			console.log('nimConnect',info)
			uni.hideLoading()
			uni.setStorageSync('loginInfo', info)
			const nim=getApp().globalData._nimInstance
			nim.getUser({
				account: this.loginForm.userName,
				done: this.getUserDone
			})
		},
		
		getUserDone(error, user) {
			console.log('获取用户资料' + (!error?'成功':'失败'))
			console.log('getUser:',user)
			if (!error) {
				uni.setStorageSync('userInfo', user);
				this.$refs.uTips.show({
					title: "登陆成功",
					type: 'success',
					duration: '2000'
				})
				setTimeout(() => uni.switchTab({
					url:"/pages/tabbar/msg"
				}),2000)
			}
		},
		
		nimDisconnect(error){
			console.log('nimDisconnect',error)
			uni.hideLoading()
			if (error) {
				switch (error.code) {
					// 账号或者密码错误, 请跳转到登录页面并提示错误
					case 302:
						this.$refs.uTips.show({
							title: "账号或者密码错误",
							type: 'error',
							duration: '2000'
						})
						break
					// 重复登录, 已经在其它端登录了, 请跳转到登录页面并提示错误
					case 417:
						break
					// 被踢, 请提示错误后跳转到登录页面
					case 'kicked':
						break
					default:
						break
				}
			}
		}
	}
}
</script>

<style lang="scss">
#login-page{
	background: url("/static/images/login_bg.webp") no-repeat fixed;
	background-size: 100% 100%;
	flex-direction: column;
	align-items: stretch;
	.tabs-wrapper{
		width: 100vw;
		opacity: 0.7;
	}
	.login-form{
		background: white;
		opacity: 0.5;
		padding: 20rpx;
	}
}
</style>
